<template>
  <div class="identity-login-container">
    <div class="login-box">
      <el-tree-select v-model="selectedOrg" :data="organizations" placeholder="请选择登录组织" class="org-select"
        @change="handleChange" check-strictly :props="{
          value: 'value',
          label: 'label',
          children: 'children',
        }" />

      <div class="identity-buttons">
        <div v-for="item in roleOptions" :key="item.value" class="identity-button"
          :class="{ active: selectedIdentity === item.value }" @click="selectIdentity(item.value)">
          <i :class="item.icon ? item.icon : 'icon-xuexi5'"></i>
          <span>{{ item.label }}</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { User, Avatar, Setting } from '@element-plus/icons-vue'
import { mapGetters } from 'vuex'
import { setStore, getStore } from '@/framework-core/utils/store'
export default {
  name: 'top-org',
  data () {
    return {
      selectedOrg: '',
      selectedIdentity: '',

      organizations: [],
      roleOptions: [],
      identityOptions: [],
    }
  },
  created () {
    if (this.roles && this.userInfo.trrId) {
      this.getOrgAndRoles()
    }
  },
  computed: {
    ...mapGetters(['userInfo', 'roles']),
  },
  methods: {
    getOrgAndRoles () {
      if (this.roles) {
        console.log('roles', this.roles)

        let hadorgs = []
        let hadroles = []
        for (let roleIndex = 0; roleIndex < this.roles.length; roleIndex++) {
          let rlabels = this.roles[roleIndex].label.split('_')
          let rvalues = this.roles[roleIndex].value.split('_')
          let icon = this.roles[roleIndex].roleIcon
          let tenantName = rlabels[0]
          let roleName = rlabels[1]
          let orgName = rlabels.length > 2 ? rlabels[2] : ''

          let tenantId = rvalues[0]
          let roleId = rvalues[1]
          let orgId = rvalues.length > 2 ? rvalues[2] : ''

          if (hadorgs.indexOf(orgId) < 0) {
            this.organizations.push({ value: orgId, label: orgName || '平台' })
            hadorgs.push(orgId)
          }
          if (hadroles.indexOf(roleId) < 0) {
            hadroles.push(roleId)
          }
          this.identityOptions.push({
            value: roleId,
            label: roleName,
            orgId: orgId,
            icon: icon,
          })
        }
      }
    },
    handleChange () {
      this.roleOptions = this.identityOptions.filter(
        (item) => item.orgId == this.selectedOrg
      )
      this.selectedIdentity = ''
    },
    selectIdentity (identity) {
      this.selectedIdentity = identity
      console.log(`选择了身份: ${identity}, 组织: ${this.selectedOrg}`)
      this.userInfo.trrId = '0_' + identity + '_' + this.selectedOrg
      if (this.userInfo.trrId == getStore({ name: 'currentTrrId' })) {
        window.location.href = '/'
      }
    },
  },
}
</script>

<style scoped lang="scss">
.identity-login-container {
  display: flex;
  justify-content: center;
  align-items: center;
  border-top: 1px solid #ebeef5;
  padding-top: 20px;

  .login-box {
    background: white;
    padding: 0 20px;
    width: 400px;
    text-align: center;

    .login-title {
      margin-bottom: 24px;
      color: #333;
    }

    .org-select {
      width: 100%;
      margin-bottom: 24px;
    }

    .identity-buttons {
      display: flex;
      gap: 16px;
      overflow-x: auto;
      scroll-snap-type: x mandatory;
      scroll-behavior: smooth;
      padding-bottom: 8px;
      width: 100%;
    }

    .identity-buttons::-webkit-scrollbar {
      height: 4px;
    }

    .identity-buttons::-webkit-scrollbar-thumb {
      background: #c0c4cc;
      border-radius: 2px;
    }

    .identity-buttons::-webkit-scrollbar-track {
      background: #f5f7fa;
    }

    .identity-button {
      flex: 0 0 calc(33.333% - 11px);
      border: 1px dashed #dcdfe6;
      border-radius: 4px;
      padding: 20px 0;
      cursor: pointer;
      transition: all 0.3s;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 8px;
      scroll-snap-align: start;
    }

    .identity-button:hover {
      border-color: #409eff;
      color: #409eff;
    }

    .identity-button.active {
      border-color: #409eff;
      background-color: #ecf5ff;
      color: #409eff;
    }
  }
}
</style>
